<%--
  Created by IntelliJ IDEA.
  Date: 2022/5/13
  Time: 11:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" + request.getServerPort() +
            request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <title>Title</title>
</head>
<body>
<input id="PageContext" type="hidden" value="${pageContext.request.contextPath}"/>
<div>
    <div class="input-group" style="float:left;">
        <div class="input-group-prepend">
            <span class="input-group-text">宠物名:</span>
        </div>
        <input type="text" aria-label="PetName" class="form-control" id="PetName">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button" onclick="queryPet()">查询</button>
        </div>
    </div>
    <div class="input-group" style="float:left;">
        <div class="input-group-prepend">
            <span class="input-group-text">主人名:</span>
        </div>
        <input type="text" aria-label="OwnerName" class="form-control" id="OwnerName">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button" onclick="queryOwner()">查询</button>
        </div>
    </div>
    <button type="button" class="btn btn-outline-primary " data-toggle="modal"
            data-target="#addPetModal" style="cursor: pointer !important; float:left" onclick="showForm(0)">
        添加宠物信息
    </button>
</div>
<!-- 内容主体区域 -->
<hr/>
<div style="padding: 15px;">
    <div class="panel-body">
        <table class="table table-hover">
            <thead>
            <tr>
                <td>编号</td>
                <td>宠物名</td>
                <td>类型</td>
                <td>萌宠诞辰</td>
                <td>所有人</td>
                <td>地址</td>
                <td>城市</td>
                <td>电话</td>
                <td>修改主人信息</td>
                <td>病例查阅</td>
                <td>增加新病例</td>
            </tr>
            </thead>
            <tbody id="information">

            </tbody>
        </table>
    </div>
</div>
<%--病例阅览模态框--%>
<div class="modal fade" id="showVisit" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">病莉详情</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
    <div class="modal-body">
        <table class="table table-hover">
            <tr>
                <td>诊断时间</td>
                <td>备注</td>
            </tr>
            <tbody id="visitInfo">

            </tbody>
        </table>
    </div>
        </div>
    </div>
</div>
<%--添加新病例模态框--%>
<div class="modal fade" id="addVisit" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加病例</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="${pageContext.request.contextPath}/addVisit" method="post">
                    <input id="pid" name="pid"  hidden>
                    <div class="form-group">
                        <%--@declare id=""--%>
                        <label for="" class="col-form-label">日期</label>
                        <input type="datetime-local" autofocus class="form-control" id="visitDate"  name="visitDate">
                    </div>
                    <div class="form-group">
                        <label for="" class="col-form-label">描述</label>
                        <input type="text" autofocus class="form-control" id="description"  name="description">
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" >添加</button>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>

<%--修改信息模态框--%>
<div class="modal fade" id="updatePetModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createFileTitle">修改主人信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="${pageContext.request.contextPath}/updateOwner" method="post">
                    <input id="id" name="id" hidden>
                    <div class="form-group">
                        <%--@declare id=""--%>
                        <label for="" class="col-form-label">宠物主人名</label>
                        <input type="text" autofocus class="form-control" id="upName"  name="oName">
                    </div>
                    <div class="form-group">
                        <label for="" class="col-form-label">地址</label>
                        <input type="text" autofocus class="form-control" id="upAddress"  name="address">
                    </div>
                    <div class="form-group">
                        <label for="" class="col-form-label">城市</label>
                        <input type="text" autofocus class="form-control" id="upCity" name="city">
                    </div>
                    <div class="form-group">
                        <label for="" class="col-form-label">电话</label>
                        <input type="text" autofocus class="form-control" id="upPhone" name="oPhone">
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" >确认修改</button>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>
<%--新增模特框--%>
<div class="modal fade" id="addPetModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">

                <h5 class="modal-title" id="add">添加宠物</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="${pageContext.request.contextPath}/addPet" method="post">
                    <div class="form-group">
                        <label for="pName" class="col-form-label">宠物名</label>
                        <input type="text" autofocus class="form-control" id="pName" name="pName">
                    </div>
                    <div class="form-group">
                        <label for="birthDate" class="col-form-label">宠物诞辰</label>
                        <input type="datetime-local" autofocus class="form-control" id="birthDate" name="birthDate">
                    </div>
                    <div class="form-group">
                        <label for="birthDate" class="col-form-label">宠物类型</label>
                        <select class="form-control form-control-sm" name="typeId" id="typeId">
<%--                            <option></option>--%>
                        </select>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="type" id="type1" value="0" checked
                               onclick="showForm(0)">
                        <label class="form-check-label" for="type1">
                            在已有的宠物主人中选
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="type" id="type2" value="1"
                               onclick="showForm(1)">
                        <label class="form-check-label" for="type2">
                            手动填写宠物主人信息
                        </label>
                    </div>
                    <select class="form-control form-control-sm" name="OwnerId" id="selectOwner">

                    </select>
                    <div id="controllerDiv">
                        <div class="form-group">
                            <label for="oName" class="col-form-label">宠物主人名</label>
                            <input type="text" autofocus class="form-control" id="oName" name="oName">
                        </div>
                        <div class="form-group">
                            <label for="address" class="col-form-label">地址</label>
                            <input type="text" autofocus class="form-control" id="address" name="address">
                        </div>
                        <div class="form-group">
                            <label for="city" class="col-form-label">城市</label>
                            <input type="text" autofocus class="form-control" id="city" name="city">
                        </div>
                        <div class="form-group">
                            <label for="oPhone" class="col-form-label">电话</label>
                            <input type="text" autofocus class="form-control" id="oPhone" name="oPhone">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" id="submit">确认添加</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(function () {
        LoadCustomerData();
        getType();
        var msg = "${msg}"
        console.log(msg)
        if (msg != "") {
            alert(msg)
        }
    })

    //ajax请求
    function LoadCustomerData() {
        $.ajax({
            url: $("#PageContext").val() + "/getPets",
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data)
                //清除旧的数据
                $("#information").html("");
                //添加新的数据
                $.each(data, function (i, n) {
                    $("#information").append("<tr>")
                        .append("<td>" + n.id + "</td>")
                        .append("<td>" + n.name + "</td>")
                        .append("<td>" + n.type.name + "</td>")
                        .append("<td>" + n.birthDate + "</td>")
                        .append("<td>" + n.owner.name + "</td>")
                        .append("<td>" + n.owner.address + "</td>")
                        .append("<td>" + n.owner.city + "</td>")
                        .append("<td>" + n.owner.phone + "</td>")
                        .append("<td><button onclick='javascript:return update(" + n.owner.id + ")' class='layui-btn layui-btn-sm layui-btn-primary'><i class='layui-icon layui-icon-edit' style='font-size: 15px;'></i></button></td>")
                        .append("<td><button onclick='javascript:return getVisit(" + n.id + ")' class='layui-btn layui-btn-sm layui-btn-primary'><i class='layui-icon layui-icon-component' style='font-size: 15px;'></i></button></td>")
                        .append("<td><button onclick='javascript:return addVisit(" + n.id + ")' class='layui-btn layui-btn-sm layui-btn-primary'><i class='layui-icon layui-icon-form' style='font-size: 15px;'></i></button></td>")
                        .append("</tr>")
                });
            },
        })
    }
    function getVisit(id) {
        $.ajax({
            url: $("#PageContext").val() + "/getVisit?petId="+id,
            type: "get",
            dataType: "json",
            success: function (data) {
                $("#showVisit").modal('show')
                console.log(data)
                //清除旧的数据
                $("#visitInfo").html("");
                //添加新的数据
                $.each(data, function (i, n) {
                    $("#visitInfo").append("<tr>")
                        .append("<td>" + n.visitDate + "</td>")
                        .append("<td>" + n.description + "</td>")
                        .append("</tr>")
                });
            },
        })

    }
    function addVisit(id) {
        $("#addVisit").modal('show')
        $("#pid").val(id);

    }
    function getType() {
        $.ajax({
            url: $("#PageContext").val() + "/getType",
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data)
                //清除旧的数据
                $("#typeId").html("");
                //添加新的数据
                $.each(data, function (i, n) {
                    $("#typeId")
                        .append("<option  value='" + n.id + "'>" + n.name + "</option>")

                });
            },
        })
    }
    function queryPet() {
        var petName = $("#PetName").val();
        console.log(petName)
        $.ajax({
            url: $("#PageContext").val() + "/getPets?petName=" + petName,
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data)
                //清除旧的数据
                $("#information").html("");
                //添加新的数据
                $.each(data, function (i, n) {
                    $("#information").append("<tr>")
                        .append("<td>" + n.id + "</td>")
                        .append("<td>" + n.name + "</td>")
                        .append("<td>" + n.type.name + "</td>")
                        .append("<td>" + n.birthDate + "</td>")
                        .append("<td>" + n.owner.name + "</td>")
                        .append("<td>" + n.owner.address + "</td>")
                        .append("<td>" + n.owner.city + "</td>")
                        .append("<td>" + n.owner.phone + "</td>")
                        .append("</tr>")
                });
            },
        })
    }

    function queryOwner() {
        var ownerName = $("#OwnerName").val();
        console.log(ownerName)
        $.ajax({
            url: $("#PageContext").val() + "/getPets?ownerName=" + ownerName,
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data)
                //清除旧的数据
                $("#information").html("");
                //添加新的数据
                $.each(data, function (i, n) {
                    $("#information").append("<tr>")
                        .append("<td>" + n.id + "</td>")
                        .append("<td>" + n.name + "</td>")
                        .append("<td>" + n.type.name + "</td>")
                        .append("<td>" + n.birthDate + "</td>")
                        .append("<td>" + n.owner.name + "</td>")
                        .append("<td>" + n.owner.address + "</td>")
                        .append("<td>" + n.owner.city + "</td>")
                        .append("<td>" + n.owner.phone + "</td>")
                        .append("</tr>")
                });
            },
        })
    }



    // 添加访问弹出框, 显示弹框,传递对应的Id
    function update(id) {
        //赋值id,方便传递到后台
        $("#id").val(id);
        //表单回显
        $.ajax({
            url: $("#PageContext").val() + "/getOwner?id="+id,
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data)
                //清除旧的数据
                $("#upName").val("");
                $("#upCity").val("");
                $("#upAddress").val("");
                $("#upPhone").val("");
                //添加新的数据
                $("#upName").val(data[0].name);
                $("#upCity").val(data[0].city);
                $("#upAddress").val(data[0].address);
                $("#upPhone").val(data[0].phone);
            },
        })
        $("#createFileTitle").text("修改信息");
        $('#updatePetModal').modal('show');
    }

    function showForm(type) {
        if (type === 0) {
            $("#controllerDiv").hide();
            $("#selectOwner").show();
            $.ajax({
                url: $("#PageContext").val() + "/getOwner",
                type: "get",
                dataType: "json",
                success: function (data) {
                    //清除旧的数据
                    $("#selectOwner").html("");
                    //添加新的数据
                    $.each(data, function (i, n) {
                        $("#selectOwner")
                            .append("<option  value='" + n.id + "'>" + n.name + "</option>")
                    });
                },
            })
        }
        if (type === 1) {
            $("#controllerDiv").show();
            $("#selectOwner").hide();
        }

    }
</script>
</html>
